<!doctype html>
<html>

<head>
	<title>Leaflet Temporal GeoJSON</title>
	<meta charset="utf-8">
</head>

<body>

	<div id="map"></div>
	<div id="time"></div>

	<div id="controls">

		<h2>Leaflet Temporal GeoJSON</h2>
		<div class="slidecontainer">
			<p>Keyframes:</p>
			<input type="range" min="0" max="99" value="0" step="2" class="slider" id="keyFrameSlider">
		</div>
		<button id="setStyle">change style</button>

	</div>

	<!--leaflet-->
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

	<!--the plugin-->
	<script src="../dist/leaflet-temporal-geojson.js"></script>

	<!--demo stuff-->
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="https://underscorejs.org/underscore-min.js"></script>
	<script src="https://unpkg.com/chroma-js@2.0.3/chroma.min.js"></script>
	<script src="data.js" charset="utf-8"></script>
	<link rel="stylesheet" href="demo.css" />
	<script src="demo.js"></script>

</body>

</html>